<template>
	<!-- 条件筛选 -->
	<u-sticky offset-top="0" :zIndex='2'>
	<view class="page-index">
		<view class="select-box">
			<view class="select-item" v-for="(item,index) in selectList" :key="index" @click="openPopup(item,index)">
				<view :class="[item.value=='区域'||item.value=='类型'||item.value=='价格'||item.value=='筛选'?'value':'valueSelect']">
					{{item.value}}
				</view>
				<image :src="item.selectUrl" mode="" style="width: 32rpx;height: 32rpx;"></image>
			</view>
		</view>
	</view>
	<!-- 筛选弹出层 -->
	<Popup ref="popups"/>
	</u-sticky>
</template>

<script>
	import Popup from './popup/popup.vue'

	export default {
		components: {
			Popup
		},
		name:"select",
		data() {
			return {
				selectList:[{
					value:'区域',
					selectUrl:'../../static/home/select.png',
				},
				{
					value:'类型',
					selectUrl:'../../static/home/select.png',
				},
				{
					value:'价格',
					selectUrl:'../../static/home/select.png',
				},
				{
					value:'筛选',
					selectUrl:'../../static/home/select.png',
				}]
			}; 
		},
		created(){
			let that = this
			uni.$on('areass', function(data) {
				if(data=='不限'||''){
					that.selectList[0].value='区域'
				}else{
					that.selectList[0].value=data
				}
			})
			uni.$on('tentypes', function(data) {
				if(data=='不限'||''){
					that.selectList[1].value='类型'
				}else{
					that.selectList[1].value=data
				}
			})
			uni.$on('rents', function(data) {
				if(data=='不限'||''){
					that.selectList[2].value='价格'
				}else{
					that.selectList[2].value=data
				}
			})
			uni.$on('formSearch', function(data) {
				if(data.size_id[0]!=0||data.configure_id[0]!=0){
					that.selectList[3].value='筛选 '
				}
				else{
					that.selectList[3].value='筛选'
				}
			})
		},
		methods:{
			openPopup(item,index){
				
				if(index=='0'){
					this.$refs.popups.regionOpen()
				}
				else if(index=='1'){
					this.$refs.popups.typeOpen()
				}
				else if(index=='2'){
					this.$refs.popups.rentOpen()
				}
				else{
					this.$refs.popups.screenOpen()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-index{
		background: #fff;
				margin: 0 -32rpx;
		.select-box{
			height: 96rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.select-item{
				display: flex;
				height: 56rpx;
				justify-content: space-around;
				width: 172rpx;
				align-items: center;
				justify-content: center;
				border-right: 1rpx solid rgba(32, 32, 32, 0.08);
				.value{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					color: #202020;
				}
				.valueSelect{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					color: #006FD0;
				}
			}
			.select-item:last-child{
				border: none;
			}
		}
	}
</style>